<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <!-- 引入网页头标 -->
	<link rel="shortcut icon" href="../images/favicon.ico">
    <!-- 引入css -->
	<link rel="stylesheet" href="../css/shop.css">
    <!-- 引入字体图标 -->
	<link rel="stylesheet" href="../font/iconfont.css">
    <!-- 引入初始化css -->
	<link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/nav.css">
	

</head>
<body>
    <!-- 广告通栏 -->
		<div class="ggtl">
			<a href="#">
				<img src="../images/ggtl.jpg" alt="">
			</a>
			<i class="close">关闭广告</i>
		</div>
    <!-- 固定侧边电梯栏 -->
			<ul class="page-slider">
				<li calss="APP">
					<a href="">
					<img src="../images/phoneAPP.png" class="imgf" alt="">
					<img src="../images/phoneAPP2.png" class="imgf imgs" alt="">
					<span>手机APP</span>
					</a>
					<div class="rightpop">			
						<img src="../images/download.PNG" alt="">
						<p>扫码领取新人百元礼包</p>			
					</div>
				</li>
				<li>
					<a href="peop.html">
					<img  src="../images/user1.png" class="imgf" alt="">
					<img src="../images/user2.png" class="imgf imgs" alt="">
					<span>个人中心</span>
					</a>
				</li>
				<li>
					<a href="">
					<img src="../images/server1.png" class="imgf" alt="">
					<img src="../images/server2.png" class="imgf imgs" alt="">
					<span>售后服务</span>
					</a>	
				</li>
				<li>
					<a href="">
					<img src="../images/peop.png" class="imgf" alt="">
					<img src="../images/peop_hover.png" class="imgf imgs" alt="">
					<span>人工服务</span>
					</a>	
				</li>
				<li>
					<a href="">
					<img src="../images/car1.png" class="imgf" alt="">
					<img src="../images/car2.png" class="imgf imgs"alt="">
					<span>购物车</span>
					</a>
				</li>
				<li class="f-top">
					<a href="#f-top">
					<img src="../images/totop.png" class="imgf" alt="">
					<img src="../images/totop_hover.png" class="imgf imgs" alt="">
					<span>回顶部</span>
					</a>
				</li>
			</ul>
	<!-- 顶部通栏 -->
	<div class="nav-top" id="f-top">
		<div class="w">
			<div class="nav-l">
				<ul>
					<li>
						<a href="gw.html"> 小米官网</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 小米商城</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> MIUI</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> loT</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 云服务天星</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 数科</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 有品小爱开放平台</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 企业团购</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 资质证照</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 协议规则</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 下载app</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> 智能生活</a>
					</li>
					<li>
						<a href="#"> <span class="item">|</span> Select Location</a>
					</li>
				</ul>
			</div>

			<div class="nav-r">
				<form action="">
					<ul>
						<li>
							<a href="./login.html"> 登录</a>
						</li>
						<li>
							<a href="./index-4.html"> <span class="item">|</span> 注册</a>
						</li>
					
						<li>
							<a href="#"> <span class="item">|</span> 消息通知</a>
						</li>
						<li>
							<a href="#">
								<div class="cart">
									<i class="iconfont">&#xf0179;</i> 购物车( 0 )
									<div class="cart-bt">
										<a href="#">
											购物车中还没有商品，赶紧选购吧！
										</a>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</div>
	<div class="big">
		<div class="content">
			<!-- 头部区域菜单 部分 -->
			<div class="menu w">
				<div class="logo">
					<a href="#">
						<img src="../images/mi-logo.png" alt="">
					</a>
				</div>
				<div class="menu-t">
					<ul>
						<li class="xm"><a href="./index-3.html">小米手机</a>
							<div class="menu-li-xm">
								<ul>
									<li>
										<a href="./index-3.html">
										 <img src="../images/xmsj.webp" alt="">
											<p class="p-li-t">
												Xiaomi Civi 3
											</p>
											<p class="p-li-f">2399元</p>
										</a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/xmsj.webp" alt="">
												<p class="p-li-t">
													Xiaomi Civi 3
												</p>
												<p class="p-li-f">2399元</p>
										   </a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/xmsj.webp" alt="">
												<p class="p-li-t">
													Xiaomi Civi 3
												</p>
												<p class="p-li-f">2399元</p>
										   </a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/xmsj.webp" alt="">
												<p class="p-li-t">
													Xiaomi Civi 3
												</p>
												<p class="p-li-f">2399元</p>
										   </a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/xmsj.webp" alt="">
											   <p class="p-li-t">
												   Xiaomi Civi 3
											   </p>
											   <p class="p-li-f">2399元</p>
										   </a>
									</li>
								</ul>
							</div>
						</li>
						<li class="hm"><a href="./index-3.html">Redmi红米</a>
							<div class="menu-li-hm">
								<ul>
									<li>
										<a href="./index-3.html">
											 <img src="../images/hmsj.webp" alt="">
											<p class="p-li-t">
												Redmi Note 12T Pro
											</p>
											<p class="p-li-f">1599起</p>
										</a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/hmsj.webp" alt="">
										   <p class="p-li-t">
											   Redmi Note 12T Pro
										   </p>
										   <p class="p-li-f">1599起</p>
									   </a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/hmsj.webp" alt="">
										   <p class="p-li-t">
											   Redmi Note 12T Pro
										   </p>
										   <p class="p-li-f">1599起</p>
									   </a>
									</li>
									<li>
										<a href="./index-3.html">
											<img src="../images/hmsj.webp" alt="">
										   <p class="p-li-t">
											   Redmi Note 12T Pro
										   </p>
										   <p class="p-li-f">1599起</p>
									   </a>
									</li>
								</ul>

							</div>
						</li>
						<li><a href="#">电视笔记本</a></li>
						<li><a href="#">家电</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">智能硬件</a></li>
						<li><a href="./service.html">服务中心</a></li>
						<li><a href="#">社区</a></li>
						<li><a href="./ms.html" target="_blank">小米秒杀</a></li>
					</ul>
				</div>
				<div class="serch">
					<form action="">
						<input type="text" name="" id="serch" placeholder="小米手机  红米">
						<button class="btn">
							<i class="iconfont">&#xe628;</i>
						</button>
					</form>
				</div>
			</div>
		</div>	
		<!-- banner 部分 -->
		<div class="banner" id="lunbotu">
			<!-- 轮播图 图片 -->
			<div class="box">
				<!-- 轮播图图片 -->
				<ul class="image">
					<li>
						<a href="#"><img src="../images/lgood.jpg" alt=""></a>
					</li>
					<li>
						<a href="#"><img src="../images/2.jpeg" alt=""></a>
					</li>
					<li>
						<a href="#"><img src="../images/3webp.webp" alt=""></a>
					</li>
					<li>
						<a href="#"><img src="../images/2.webp" alt=""></a>
					</li>
				</ul>
				<!-- 圆圈小Li -->
				<ul class="num">
					<li class='current'></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<!-- 轮播图左右按钮 -->
				<div class="left arrow"><i class="iconfont">&#xe667;</i></div>
				<div class="right arrow"><i class="iconfont">&#xe601;</i></div>

			</div>
			<div class="banner-l">
				<ul>
					<li><a href="#"> 电视盒子<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 笔记本显示器<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 家电插线板<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 出行穿戴<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 智能路由器<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 电源配件<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 健康儿童<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 耳机音箱<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 生活箱包<span class="item-l iconfont">&#xe601;</span> </a></li>
					<li><a href="#"> 生活箱包<span class="item-l iconfont">&#xe601;</span> </a></li>
				</ul>
			</div>
		</div>
		<!-- 推荐部分 -->
		<div class="w-1">
			<div class="recommend">
				<div class="sidebar-l">
					<ul>
						<li>
							<a href="#" title="手机"><i class="iconfont">&#xe61b;</i>
							</a>
							<div class="bottom_line"></div>

						</li>
						<li><a href="#" title="礼品"><i class="iconfont">&#xe616;</i></a>
							<div class="bottom_line"></div>

						</li>
						<li><a href="#" title="闹钟"><i class="iconfont">&#xe607;</i></a>
							<div class="bottom_line"></div>
						</li>
						<li><a href="#" title="手机卡"><i class="iconfont">&#xe66d;</i></a>
						</li>
						<li><a href="#" title="充值话费"><i class="iconfont">&#xe639;</i></a></li>
						<li><a href="#" title="平板电脑"><i class="iconfont">&#xe737;</i></a></li>

					</ul>
				</div>
				<!-- 右边 分为三块 -->
				<div class="sidebar-r">
					<div class="pic-1">
						<a href="#">
							<img src="../images/img1.jpg" alt="">
						</a>
					</div>
					<div class="pic-2">
						<a href="#">
							<img src="../images/img2.jpg" alt="">
						</a>
					</div>
					<div class="pic-3">
						<a href="#">
							<img src="../images/img3.jpg" alt="">
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 推荐列表部分 -->
	<div class="big-2">
		<div class="sidebar-f">
				<a href="#">
					<img src="../images/xmad_15326189127178_tugca.webp" alt="">
				</a>
		</div>
		<!-- 推荐详情 手机列表 -->
		<div class="sidebar-foot-sj">
			<div class="sidebar-foot-t" id="xmisji">
					<a href="#">
						小米手机
					</a>
					<span class="sj">
						<a href="#">
							查看更多>>
						</a>
					</span>
			</div>
			<!-- 手机详情 主体 -->
			<div class="sidebar-foot-c">

				<div class="sidebar-foot-c-l">
					<a href="#">
						<img src="../images/xmad_15323220713837_GLBVX.jpg" alt="">
					</a>
				</div>
				<div class="sidebar-foot-c-r">
					<ul>
						<li>
							<!-- 新品小图标定位 -->
							<em class="new-xp">新品</em>
							<a href="./index-3.html"><img src="../images/xmsj1.webp" alt="">
								<p class="p-li-t">
									Redmi Note 12T Pro
								</p>
								<p class="p-li-c">
									年度LCD屏幕之光
								</p>
								<p class="p-li-f">1599元起</p>
							</a>
						</li>
						<li>
							<!-- 新品小图标定位 -->
							<em class="new-xp">新品</em>
							<a href="./index-3.html"><img src="../images/xmsj2.webp" alt="">
								<p class="p-li-t">
									Xiaomi Civi 3
								</p>
								<p class="p-li-c">
									仿生双眸 天生出色
								</p>
								<p class="p-li-f">2499元起</p>
							</a>
						</li>
						<li>
							<!-- 新品小图标定位 -->
							<em class="new-xp">新品</em>
							<a href="./index-3.html"><img src="../images/xmsj3.webp" alt="">
								<p class="p-li-t">
									Xiaomi 13 Ultra
								</p>
								<p class="p-li-c">
									徕卡光学全焦段四摄
								</p>
								<p class="p-li-f">5999元起</p>
							</a>
						</li>
						<li>
							<!-- 新品小图标定位 -->
							<em class="new-xp">新品</em>
							<a href="./index-3.html"><img src="../images/xmsj4.webp" alt="">
								<p class="p-li-t">
									Redmi Note 12 Turbo
								</p>
								<p class="p-li-c">
									狂暴引擎 超强性能释放
								</p>
								<p class="p-li-f">1799元起</p>
							</a>
						</li>
						<li>
							<a href="./index-3.html"><img src="../images/xmsj5.webp" alt="">
								<p class="p-li-t">
									小米手机 
								</p>
								<p class="p-li-c">
									简约设计,轻盈握感
								</p>
								<p class="p-li-f">2399元</p>
							</a>
						</li>
						<li>
							<a href="./index-3.html"><img src="../images/xmsj6.webp" alt="">
								<p class="p-li-t">
									小米手机 
								</p>
								<p class="p-li-c">
									简约设计,轻盈握感
								</p>
								<p class="p-li-f">2399元</p>
							</a>
						</li>
						<li>
							<a href="./index-3.html"><img src="../images/xmsj7.webp" alt="">
								<p class="p-li-t">
									小米手机 
								</p>
								<p class="p-li-c">
									简约设计,轻盈握感
								</p>
								<p class="p-li-f">2399元</p>
							</a>
						</li>
						<li>
							<a href="./index-3.html"><img src="../images/xmsj8.webp" alt="">
								<p class="p-li-t">
									小米手机 
								</p>
								<p class="p-li-c">
									简约设计,轻盈握感
								</p>
								<p class="p-li-f">2399元</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 底部横幅广告 -->
			<div class="sidebar-f">
					<a href="#">
						<img src="../images/xmad_15330597618059_zrRgh.webp" alt="">
					</a>
			</div>

			<!-- 推荐 电视详情页 -->
			<div class="sidebar-foot-tv">
				<!-- 头部 -->
				<div class="sidebar-foot-t" id="xmidshi">
						<a href="#">
							小米家电
						</a>
					<span class="tv">
						<a href="#">
							热门
						</a> <a href="#">
							电视影音
						</a> <a href="#">
							电脑
						</a>
					</span>
				</div>
				<!-- 详情 主体 -->
				<div class="sidebar-foot-c">
					<div class="sidebar-foot-c-l">
						<ul>
							<li class="tv-t">
								<a href="#">
									<img src="../images/xmad_15232550390498_qwxEC.webp" alt="">
								</a>
							</li>
							<li class="tv-b">
								<a href="#">
									<img src="../images/xmad_15232550390498_qwxEC2.webp" alt="">

								</a>
							</li>
						</ul>
					</div>
					<div class="sidebar-foot-c-r">
						<ul>
							<li>
								<!-- 新品小图标定位 -->
								<em class="new-xp">新品</em>
								<a href="#"><img src="../images/xmjd.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<!-- 新品小图标定位 -->
								<em class="new-xp">新品</em>
								<a href="#"><img src="../images/xmjd1.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<!-- 新品小图标定位 -->
								<em class="new-xp">新品</em>
								<a href="#"><img src="../images/xmjd2.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<!-- 新品小图标定位 -->
								<em class="new-xp">新品</em>
								<a href="#"><img src="../images/xmjd3.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<a href="#"><img src="../images/xmjd4.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<a href="#"><img src="../images/xmjd5.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<a href="#"><img src="../images/xmjd6.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
							<li>
								<a href="#"><img src="../images/xmjd7.webp" alt="">
									<p class="p-li-t">
										小米电视 ES55 2022款
									</p>
									<p class="p-li-c">
										多分区背光 | MEMC动态补偿 | 杜比视界
									</p>
									<p class="p-li-f">2299元</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部横幅广告 -->
		<div class="sidebar-f">
			<a href="#">
				<img src="../images/xmad_15326189127178_tugca.webp" alt="">
			</a>
		</div>
	</div>

	<!--关于小米-->
	<!-- 页面底部 -->
	<div class="big-3">
		<div class="footer">
			<div class="footer-top">
				<ul class="footer-ul">

					<li><a href="#"><i class="iconfont">&#xe614;
							</i> 预约维修服务</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe6cc;
							</i> 7无理由退货</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe645;
							</i> 15天免费换货</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xf0081;
							</i> 满69元包邮</a><span class="footer-fgx">|</span></li>
					<li><a href="#"><i class="iconfont">&#xe609;
							</i> 1110余家售后网点</a></li>
				</ul>
			</div>
			<div class="footer-bod clearfix">
				<dl>
					<dt>
						<a href="#">
							帮助中心
						</a>
					</dt>
					<dd>
						<a href="#">
							账户管理
						</a>
					</dd>
					<dd>
						<a href="#">
							购物指南
						</a>
					</dd>
					<dd>
						<a href="#">
							订单操作
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							服务支持
						</a>
					</dt>
					<dd>
						<a href="#">
							售后政策
						</a>
					</dd>
					<dd>
						<a href="#">
							资助服务
						</a>
					</dd>
					<dd>
						<a href="#">
							相关下载
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							线下门店
						</a>
					</dt>
					<dd>
						<a href="#">
							小米之家
						</a>
					</dd>
					<dd>
						<a href="#">
							服务网点
						</a>
					</dd>
					<dd>
						<a href="#">
							授权体验店
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							关于小米
						</a>
					</dt>
					<dd>
						<a href="#">
							了解小米
						</a>
					</dd>
					<dd>
						<a href="#">
							加入小米
						</a>
					</dd>
					<dd>
						<a href="#">
							投资者联系
						</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">
							关注我们
						</a>
					</dt>
					<dd>
						<a href="#">
							新浪微博
						</a>
					</dd>
					<dd>
						<a href="#">
							官方微博
						</a>
					</dd>
					<dd>
						<a href="#">
							联系我们
						</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>		

	<div class="big-4">
		<img src="../images/big-4.png" alt="">
	</div>

	<script src="../js/shop.js"></script>
</body>
</html>